<template>
  <div class="main">
    <el-card class="box-card main-card">
      <div slot="header" class="clearfix">
        <span>个人主页</span>
      </div>
      <el-row :gutter="0">
        <el-col :span="6">
          <div class="grid-content bg-purple-left">
            <el-row class="bg-purple-left-first">
              <img :src="headImage" class="bg-purple-left-top-head" />
            </el-row>
            <el-row class="bg-purple-left-second">
              <div>
                <div class="bg-purple-left-second-name">{{ userName }}</div>
              </div>
            </el-row>
            <el-row class="bg-purple-left-third">
              <el-button icon="el-icon-s-tools" @click="openAdminDrawer()" plain
                >个人设置</el-button
              >
            </el-row>
            <el-row class="bg-purple-left-four">
              <el-row
                ><div class="money-text">当前团队：{{ teamName }}</div></el-row
              >
              <el-row
                ><div class="money-text">您当月财务数据如下：</div></el-row
              >
              <el-tabs
                v-model="activeName"
                tab-position="top"
                class="bg-purple-left-four-tab"
              >
                <el-tab-pane
                  class="bg-purple-left-four-tab-pane"
                  label="收入"
                  name="first"
                >
                  <el-row class="bg-purple-left-four-tab-first">
                    <el-col :span="8">
                      <div class="money-num">
                        {{ billData.income.dayMoney }}
                      </div>
                      <div class="money-text">今日收入</div>
                    </el-col>
                    <el-col :span="8">
                      <div class="money-num">
                        {{ billData.income.monthMoney }}
                      </div>
                      <div class="money-text">本月收入</div>
                    </el-col>
                    <el-col :span="8">
                      <div class="money-num">
                        {{ billData.income.yearMoney }}
                      </div>
                      <div class="money-text">今年收入</div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane
                  class="bg-purple-left-four-tab-pane"
                  label="支出"
                  name="second"
                >
                  <el-row class="bg-purple-left-four-tab-first">
                    <el-col :span="8">
                      <div class="money-num">
                        {{ billData.outCome.dayMoney }}
                      </div>
                      <div class="money-text">今日支出</div>
                    </el-col>
                    <el-col :span="8">
                      <div class="money-num">
                        {{ billData.outCome.monthMoney }}
                      </div>
                      <div class="money-text">本月支出</div>
                    </el-col>
                    <el-col :span="8">
                      <div class="money-num">
                        {{ billData.outCome.yearMoney }}
                      </div>
                      <div class="money-text">今年支出</div>
                    </el-col>
                  </el-row></el-tab-pane
                >
              </el-tabs>
            </el-row>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="team-mode">
            <el-tabs v-model="activeNameLeft">
              <el-tab-pane label="团队管理" name="team">
                <el-card class="box-card team-card">
                  <div>
                    <ul class="team-ul">
                      <li
                        class="team-ul-li"
                        v-for="team in teamList"
                        :key="team.teamName"
                        :value="team.teamName"
                      >
                        <div class="team-ul-name">
                          {{ team.teamName }}
                          <el-tag type="info">{{ team.type }}</el-tag>
                          <div class="team-icon">
                            <el-button
                              type="primary"
                              @click="getTeamMember(team)"
                              v-if="team.teamName != '个人版'"
                              >查看成员</el-button
                            ><br />
                          </div>
                        </div>
                        <p class="team-ul-desc">{{ team.teamMotto }}</p>
                        <p class="team-ul-time">
                          创建时间：{{ team.createTime }}
                        </p>
                        <p class="team-ul-time">团队介绍：{{ team.remark }}</p>
                        <el-divider></el-divider>
                      </li>
                    </ul>
                  </div>
                </el-card>
              </el-tab-pane>
              <el-tab-pane class="tab-bill" label="收支状况" name="bill">
                <div class="month-select">
                  <div>
                    <el-date-picker
                      v-model="monthYear"
                      type="month"
                      placeholder="选择月"
                    >
                    </el-date-picker>
                    <el-select
                      v-model="isIncome"
                      placeholder="选择类型"
                      style="width: 220px; margin-left: 10px"
                    >
                      <el-option label="所有" value=""> </el-option>
                      <el-option label="收入" value="1"> </el-option>
                      <el-option label="支出" value="0"> </el-option>
                    </el-select>
                  </div>
                </div>
                <el-table
                  style="
                    width: 80%;
                    height: 400px;
                    margin: 0 auto;
                    margin-top: 50px;
                  "
                  :data="financeData"
                >
                  <el-table-column prop="billType" label="类别" width="200">
                  </el-table-column>
                  <el-table-column prop="amount" label="统计" width="200">
                  </el-table-column>
                  <el-table-column prop="name" label="操作" width="200">
                    <button>查看详情</button>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <!-- <el-tab-pane label="称号管理" name="designation"
              >称号管理</el-tab-pane
            > -->
            </el-tabs>
          </div>
        </el-col>
      </el-row>

      <el-drawer
        title="个人设置"
        size="40%"
        :visible.sync="adminDrawer"
        :direction="direction"
        :before-close="handleClose"
      >
        <el-form
          ref="userForm"
          :model="userForm"
          class="user-form"
          label-position="top"
        >
          <el-form-item label="姓名">
            <el-input v-model="userForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="userForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="userForm.birthday"
              type="date"
              placeholder="选择日期"
              style="width: 200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="个性签名" prop="perSignature">
            <el-input
              v-model="userForm.perSignature"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateUserInfo()">更新</el-button>
            <el-button @click="resetAddForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>

      <el-dialog title="团队信息" :visible.sync="teamMemberDialog" width="40%">
        <el-table :data="teamMemberList">
          <el-table-column
            property="userName"
            label="成员名"
            width="150"
          ></el-table-column>
          <el-table-column
            property="relationshipType"
            label="成员角色"
            width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.relationshipType == 1">队长</span>
              <span v-if="scope.row.relationshipType == 2">成员</span>
            </template>
          </el-table-column>
          <el-table-column
            property="telephone"
            label="手机号"
            width="150"
          ></el-table-column>
          <el-table-column
            property="sex"
            label="性别"
            width="100"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { listTypeFinance, getOutcome } from "@/api/bill";
import {
  getTeamListByUser,
  selectById,
  updateById,
  listPage,
} from "@/api/user";
export default {
  data() {
    return {
      activeName: "first",
      activeNameLeft: "team",
      userName: "",
      teamName: "",
      headImage: "",
      level: 123,
      financeData: [],
      teamList: [
        {
          teamName: "个人版",
          teamMotto: "个人使用",
          type: "家人",
          createTime: "2022-10-01",
        },
      ],
      billData: {
        income: "",
        outCome: "",
      },
      adminDrawer: false,
      teamMemberDialog: false,
      direction: "rtl",
      userForm: {},
      monthYear: this.dayjs().startOf("month").format("YYYY-MM"),
      isIncome: "",
      teamMemberTotal: "",
      teamMemberList: [],
    };
  },
  mounted() {
    this.getUserInfo();
    this.getFinanceData();
    this.listTeamByUser();
    this.getMoneyData();
    this.listTeamByUser();
  },
  methods: {
    async openAdminDrawer() {
      await this.getUserInfo();
      this.adminDrawer = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    getFinanceData() {
      const param = {
        userId: this.$store.getters.userId,
        teamName: this.$store.getters.teamName,
        isIncome: this.isIncome,
        logDate: this.dayjs(this.monthYear).format("YYYY-MM"),
      };
      listTypeFinance(param).then((res) => {
        if (res.code == 0) {
          this.financeData = res.data;
        }
      });
    },
    listTeamByUser() {
      const params = { userName: this.$store.getters.name };
      getTeamListByUser(params).then((res) => {
        if (res.code == 0) {
          if (res.data.length != 0) {
            this.teamList = res.data;
          } else {
            this.$message({
              message: "你还未注册",
              type: "warn",
            });
          }
        }
      });
    },
    getMoneyData() {
      var myDate = new Date();
      console.log(this.dayjs(myDate).format("YYYY-MM-DD"));
      const param = {
        userName: this.$store.getters.name,
        monthYear: this.dayjs(myDate).format("YYYY-MM-DD"),
        teamName: this.$store.getters.teamName,
      };
      getOutcome(param).then((res) => {
        if (res.code == 0) {
          this.billData = res.data;
        }
      });
    },
    getUserInfo() {
      const param = {
        id: this.$store.getters.userId,
      };
      selectById(param).then((res) => {
        if (res.code == 0) {
          this.userForm = res.data;
          this.userName = res.data.userName;
          this.headImage = res.data.headImage;
        }
      });
      this.teamName = this.$store.getters.teamName;
    },
    async updateUserInfo() {
      console.log(this.userForm);
      updateById(this.userForm).then((res) => {
        if (res.code == 0) {
          this.$store.dispatch(
            "user/updateNameAndAvatar",
            this.userName,
            this.headImage
          );
          const params = {
            userName: this.userForm.userName,
            password: this.userForm.password,
            teamId: this.userForm.teamId,
          };
          this.$store.dispatch("user/login", params);
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.getUserInfo();
          this.adminDrawer = false;
        }
      });
    },
    getTeamMember(team) {
      this.teamMemberDialog = true;
      const param = {
        page: 1,
        limit: 100,
        teamName: team.teamName,
      };
      listPage(param).then((res) => {
        this.teamMemberList = res.data;
      });
    },
  },
  watch: {
    monthYear: {
      deep: true,
      handler() {
        this.getFinanceData();
      },
    },
    isIncome: {
      deep: true,
      handler() {
        this.getFinanceData();
      },
    },
  },
};
</script>
<style scoped>
.main {
  position: relative;
  width: 100%;
  left: 10px;
}
.el-card {
  width: 98%;
  height: 80%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-left {
  background: white;
}
.bg-purple-left-first {
  position: relative;
  left: 27%;
  top: 20px;
}
.bg-purple-left-second {
  margin: 0 auto;
}
.bg-purple-left-third {
  position: relative;
  text-align: center;
  top: 20px;
}
.bg-purple-left-four {
  position: relative;
  top: 50px;
  height: 300px;
}
.bg-purple-left-four-tab {
  position: relative;
  bottom: 0px;
}
.bg-purple-left-four-tab-pane {
  position: relative;
  top: 50px;
  min-height: 120px;
}
.bg-purple-left-four-tab-first {
  position: relative;
  text-align: center;
}
.bg-purple-left-top-head {
  width: 150px;
  height: 150px;
  border-radius: 100px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 91vh;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-purple-left-second-name {
  color: #1557dc;
  font-size: 26px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.bg-purple-left-four-tab .el-tabs__content {
  height: 500px !important;
}
.money-text {
  color: #aeb0b3;
  font-size: 14px;
}
.money-num {
  color: #313998;
  font-size: 26px;
  font-weight: bold;
}
.team-ul {
  max-height: 500px;
  margin-left: 20px;
  overflow: auto;
}
.team-ul-name {
  font-size: 20px;
}
.team-ul-desc {
  font-size: 14px;
  color: #898d91;
  margin-top: 5px;
}
.team-ul-time {
  font-size: 16px;
  color: #898d91;
  margin-top: 5px;
}
.team-icon {
  width: 20%;
  float: right;
  margin-top: 30px;
}
.el-icon-user-solid {
  margin-right: 20px;
}
.icon-num {
  color: #aeb0b3;
  font-size: 14px;
}
.box-card-bill {
  height: 100px;
  margin-top: 20px;
  margin: 0 auto;
}
.box-card-budget {
  height: 300px;
  margin-top: 20px;
  margin: 0 auto;
}
.tab-bill .el-card {
  width: 700px;
}
.bill-table {
  margin: 0 auto;
}
.user-form {
  margin-left: 50px;
  height: 80vh;
  overflow-y: scroll;
}
.user-form .el-input {
  width: 90%;
}
.teamInfoTitle {
  font-size: 16px;
  font-weight: 500px;
}
.teamInfoValue {
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500px;
}
.month-select {
  margin-left: 140px;
}
.main-card{
  height:99vh;
}
</style>